<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const historyList = ref([])
    const loadModal = ref(true)
	onMounted(() => {
		historyList.value = JSON.parse(uni.getStorageSync('history') || '[]')
		historyList.value = historyList.value.reverse() // 反转数组
		loadModal.value = false
	})

	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/playPage/playPage?id=' + id
		})
	}
</script>
<template>
	<view>
		<view class="cu-load load-modal" v-if="loadModal">
			<view class="cuIcon-search text-drab"></view>
			<view class="gray-text">加载中...</view>
		</view>
		<scroll-view class="scroll-view" scroll-y>
			<view v-if="historyList.length > 0">
				<view class="movie-list-item flex bg-white padding" style="border-bottom:1rpx solid #5a7c4d;"
					v-for="item in historyList" :key="item.movieId" @tap="goDetail(item.movieId)">
					<image style="width:160rpx;height:240rpx;" :src="item.movieInfo.image_thumb"></image>
					<view class="movie-list-item-info margin-left">
						<view class="nm info-item">{{item.movieInfo.nm ? item.movieInfo.nm : '未知'}}</view>
						<view class="dir info-item">导演：{{item.movieInfo.dir ? item.movieInfo.dir : '未知'}}</view>
						<view class="number info-item">观看到{{item.number}}</view>
						<view class="categorys info-item">
							类型：{{item.movieInfo.categorys ? item.movieInfo.categorys : '未知'}}</view>
						<view class="intro info-item">介绍：{{item.movieInfo.intro ? item.movieInfo.intro : '未知'}}</view>
					</view>
				</view>
			</view>
			<view v-else>
				<image 
				  src="/static/none.png" 
				  mode="widthFix" 
				  style="top:50rpx;left:50%;transform: translateX(-50%);width: 300rpx;"
				></image>
			</view>
		</scroll-view>
	</view>
</template>
<style>
	.scroll-view {
		flex: 1;
		height: 100%;
	}
	
	.movie-list-item {
		height: 100%;
		position: relative;
		color: #D0D0D0;
		font-size: 24rpx;
	}
	
	.movie-list-item-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 500rpx;
	}
	
	.info-item {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		color: #9e9e9e;
		-webkit-box-orient: vertical;
	}
	
	.nm {
		-webkit-line-clamp: 1;
		font-size: 32rpx;
		color: #000;
	}
	
	.dir {
		-webkit-line-clamp: 1;
	}
	
	.number {
		-webkit-line-clamp: 1;
		font-size: 28rpx;
		font-weight: 700;
		color:#f1c40f;
	}
	
	.categorys {
		-webkit-line-clamp: 1;
	}
	
	.intro {
		-webkit-line-clamp: 2;
	}
</style>